<template>
    <div class="card" style="display: flex">
        <div>
            <el-input style="width: 240px;" v-model="data.name" placeholder="请输入企业名称查询" prefix-icon="Search"></el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="load()">查询</el-button>
            <el-button style="margin-left: 10px;" @click="reset()">重置</el-button>
        </div>
        <div style="margin-left: auto;">
            <el-button style="margin-left: 10px;" type="danger" @click="deleteall()">批量删除</el-button>
            <el-button style="margin-left: 10px;" type="primary" @click="payall()">批量缴纳</el-button>
        </div>

    </div>

    <div class="card">
        <el-table :data="data.enterpriselist" stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="企业名称" prop="enterpriseName" />
            <el-table-column label="企业法人" prop="bossName" />
            <el-table-column label="企业地址" prop="enterpriseAddress" />
            <el-table-column label="统一社会信用代码" prop="taxNumber" />
            <el-table-column label="操作">
                <template #default="scoped">
                    <el-button type="primary" :icon="Edit" @click="enterpriseInfo(scoped.row)" circle></el-button>
                    <el-button type="danger" :icon="Delete" @click="deleteEnterprise(scoped.row)" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 15px;">
            <el-pagination v-model:current-page="data.pageNumber" v-model:page-size="data.pageSize"
                :page-sizes="[1, 5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="data.total"
                @size-change="load()" @current-change="load()" />
        </div>
    </div>


    <el-dialog title="企业信息" v-model="data.formVisable" width="500">
        <el-form :model="data.form"  ref="formRef" :rules="data.rules" label-width="150px">
            <el-form-item label="企业编号">
                <el-input v-model="data.form.enterpriseId" disabled></el-input>
            </el-form-item>
            <el-form-item label="企业名称 "  prop="enterpriseName">
                    <el-input v-model="data.form.enterpriseName"></el-input>
                </el-form-item>
                <el-form-item label="企业地址 "  prop="enterpriseAddress">
                    <el-input v-model="data.form.enterpriseAddress"></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用代码 ">
                    <el-input v-model="data.form.taxNumber" disabled></el-input>
                </el-form-item>
                <el-form-item label="法定代表人姓名 "  prop="bossName">
                    <el-input v-model="data.form.bossName"></el-input>
                </el-form-item>
                <el-form-item label="法定代表人身份证号 "  prop="idNumber">
                    <el-input v-model="data.form.idNumber"></el-input>
                </el-form-item>
                <el-form-item label="法定代表人手机号 "  prop="phone">
                    <el-input v-model="data.form.phone" autocomplete="off" />
                </el-form-item>
                <el-form-item label="账号 "  prop="username">
                    <el-input v-model="data.form.username"></el-input>
                </el-form-item>
                <el-form-item label="登录密码 "  prop="password">
                    <el-input v-model="data.form.password" type="password" show-password></el-input>
                </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCancle()">取消</el-button>
                <el-button type="primary" @click="handleConfirm()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import request from '@/utils/request';
import { reactive,ref } from 'vue';
import { Edit, Delete } from '@element-plus/icons-vue';

const data = reactive({
    name: null,
    pageNumber: 1,
    pageSize: 5,
    total: 100,
    form:{},
    enterpriselist: [],
    enterprises: [],
    enterprise: {
        enterpriseId: '',
        enterpriseAddress: '',
        bossName: '',
        phone: '',
        idNumber: '',
        taxNumber: '',
        enterpriseName: '',
        username: '',
        password: '',
    },
    searchName: '',
    formVisable: false,
    rules: {
        enterpriseName: [
            { required: true, message: '请输入企业名称', trigger: ['change', 'blur'] },
            { max: 20, message: '企业名称长度在20个字符以内', trigger: ['change', 'blur'] }
        ],
        enterpriseAddress: [
            { required: true, message: '请输入企业地址', trigger: ['change', 'blur'] },
            { max: 50, message: '企业地址长度在50个字符以内', trigger: ['change', 'blur'] }
        ],
        bossName: [
            { required: true, message: '请输入法定代表人姓名', trigger: ['change', 'blur'] },
            { min: 2, max: 10, message: '法定代表人姓名长度在2到10个字符之间', trigger: ['change', 'blur'] }
        ],
        idNumber: [
            { required: true, message: '请输入法定代表人身份证号', trigger: ['change', 'blur'] },
            { pattern: /^[0-9]{17}[0-9X]$/, message: '法定代表人身份证号必须为18位数字或字母X', trigger: ['change', 'blur'] }
        ],
        phone: [
            { required: true, message: '请输入法定代表人手机号', trigger: ['change', 'blur'] },
            { pattern: /^1[3-9]\d{9}$/, message: '法定代表人手机号格式不正确', trigger: ['change', 'blur'] }
        ],
        username: [
            { required: true, message: '请输入账号', trigger: ['change', 'blur'] },
            { pattern: /^[A-Za-z0-9]{6,10}$/, message: '请输入有效的账号', trigger: ['change', 'blur'] }
        ],
        password: [
            { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
            { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d.@]{6,20}$/, message: '密码必须为6-20位，包含大小写字母和数字，可以包含.和@', trigger: ['change', 'blur'] }
        ],
    }
})
const formRef = ref()
const load = () => {//查询所有企业
    request.get('/enterprise/searchPage', {
        params: {
            pageNumber: data.pageNumber,
            pageSize: data.pageSize,
            enterpriseName: data.searchName
        }
    }).then(res => {
        data.enterpriselist = res.data.list
        data.total = res.data.total
    })
}
load()

const handleSelectionChange = (row) => {//选中的行对象
    data.enterprise = row
}

const enterpriseInfo = (row) => {//打开员工个人详细信息
    data.formVisable = true
    data.form = { ...row }
}
const deleteall = () => {//批量删除
    if (data.enterprises.length === 0) {
        ElMessage.warning("请选择数据")
        return
    }
    ElMessageBox.confirm('删除数据后无法恢复，确认删除？', { type: 'warning' }).then(() => {
        request.post("/enterprise/deletebatch", data.enterprises).then(res => {
            if (res.code = '200') {
                ElMessage.success("删除成功")
                load()
            }
            else {
                ElMessage.error(res.message)
            }
        })
    })
}
const reset = () => {
    data.searchName = ''
    load()
}

const handleCancle = () => {
    data.formVisable = false
    data.form = {}
}
const handleConfirm = () => {//修改或查看企业信息
    formRef.value.validate((valid) => {
        if (valid) {
                request.post('/enterprise/update', data.form).then(res => {
                    if (res.code === '200') {
                        ElMessage.success('修改成功')
                        load()
                        data.formVisable = false
                    }
                    else {
                        ElMessage.error(res.message)
                    }
                })
        } else {
            ElMessage.error("修改失败，请检查信息是否正确")
            return false;
        }
    })


}


</script>

<style scoped></style>